<template>
	<el-table-column v-bind="$attrs" :min-width="minWidth" show-overflow-tooltip>
		<template #default="{ row }">
			<div class="cell-wrapper">
				<el-select v-model="row[aboProp]" :disabled="!isEdit" :filter-method="filterABO" style="width: 50%"
					filterable clearable>
					<el-option v-for="item in curABOOptions" :key="item.label" :label="item.label"
						:value="item.value" />
				</el-select>
				<el-select v-model="row[rhDProp]" :disabled="!isEdit" :filter-method="filterRhD" style="width: 50%"
					filterable clearable>
					<el-option v-for="item in curRhDOptions" :key="item.label" :label="item.label"
						:value="item.value" />
				</el-select>
			</div>
		</template>
	</el-table-column>
</template>
<script lang="ts" setup>
// 简化表单中Select的代码
import PinyinMatch from 'pinyin-match';
import { isNull } from '/@/utils';

// 正常的列, 非定制化的 ,主要是为了统一默认列宽120
defineOptions({
	name: 'MkColumnABORhD',
});

const props = defineProps({
	aboProp: {
		type: String,
		required: true,
	},
	rhDProp: {
		type: String,
		required: true,
	},
	isEdit: {
		type: Boolean,
		default: false,
	},
	minWidth:{
		type: [String, Number],
		default: 120,
	},
	autoWidth: {
		type: Boolean,
	},
});
/**
 * 血型选项
 */
const aboOptions = [
	{
		label: 'A',
		value: 'A',
	},
	{
		label: 'B',
		value: 'B',
	},
	{
		label: 'AB',
		value: 'AB',
	},
	{
		label: 'O',
		value: 'O',
	},
];
/**
 * Rh选项
 */
const rhOptions = [
	{
		label: '+',
		value: '+',
	},
	{
		label: '-',
		value: '-',
	},
];
/** 过滤显示的数据 */
const curABOOptions = ref<SelectOptionType[]>([]);
const curRhDOptions = ref<SelectOptionType[]>([]);
const filterABO = (query: string) => {
	if (!isNull(query)) {
		curABOOptions.value = aboOptions.filter((item) => {
			let values = JSON.stringify(item);
			return values.toLowerCase().indexOf(query.toLowerCase()) > -1 || PinyinMatch.match(values, query);
		});
	} else {
		curABOOptions.value = aboOptions;
	}
};
const filterRhD = (query: string) => {
	if (!isNull(query)) {
		curRhDOptions.value = rhOptions.filter((item) => {
			let values = JSON.stringify(item);
			return values.toLowerCase().indexOf(query.toLowerCase()) > -1 || PinyinMatch.match(values, query);
		});
	} else {
		curRhDOptions.value = rhOptions;
	}
};
</script>
<style lang="scss" scoped>
:deep(tbody .el-table__row) {
	.el-table__cell {
		text-align: center;
		padding: 0;
	}


	.cell {
		padding: 0;
		width: auto !important;
	}

	.el-table-column--selection .cell {
		padding: 0 40%;
	}

	.el-input {
		width: 100% !important;
	}
}
</style>
